<template>
    <view class="verification_code">
        <view class="verification_code_continor">
            <text
                v-for="(item, index) in latticeNum"
                :key="index"
                :style="inputValues.length === index || (inputValues.length === latticeNum && index === latticeNum - 1) ? borderCheckStyle : borderStyle"
            >
                <block v-if="inputValues[index]">{{ inputValues[index] }}</block>
            </text>
        </view>
        <input :type="inputType" focus :maxlength="latticeNum" class="input_info" @input="inputVal" />
    </view>
</template>

<script>
export default {
    props: {
        // 输入框框框的个数
        latticeNum: {
            type: Number,
            default: 6
        },
        // 未选中样式
        borderStyle: {
            type: String,
            default: 'border-bottom:1px solid gray;'
        },
        // 选中的样式
        borderCheckStyle: {
            type: String,
            default: 'border:1px solid rgb(117, 202, 104);'
        },
        // input类型
        inputType: {
            type: String,
            default: 'number'
        },
    },
    data() {
        return {
            inputValues:'' ,//输入的值
            isFocus:true
        };
    },
    methods: {
        inputVal(e) {
            this.inputValues = e.detail.value;
            this.$emit('getInputVerification', this.inputValues);
        },
    },

};
</script>

<style lang="scss" scoped>
.verification_code {
    position: relative;
    overflow: hidden;
    width: 100%;
    .verification_code_continor {
        display: flex;
        width: 100%;
        justify-content: space-around;
        overflow: hidden;
        text {
            width: 80rpx;
            height: 80rpx;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right:36rpx ;
        }
        text:not(:first-child) {
            // margin-left: 20rpx;
        }
    }
    .input_info {
        width: 950rpx;
        height: 100%;
        position: absolute;
        opacity: 0;
        top: 0;
        left: -200rpx;
    }
}
</style>
